<!-- table表格 -->
<template>
  <el-table
    v-if="tableData"
    :data="tableData"
    :header-cell-style="HeaderStyle"
    @selection-change="!!handleSelectionChange"
    :row-style="TableColumnStyle"
    max-height="400"
    :row-class-name="table-row-hover"
    @row-click="onRowClick"
    :height="height"
  >
    <!-- 多选框 -->
    <el-table-column
      type="selection"
      width="55"
      v-if="!!handleSelectionChange"
      align="center"
    >
    </el-table-column>
    <!-- 序号 -->
    <el-table-column
      type="index"
      label="序号"
      width="60"
      align="center"
      v-if="header.serial"
    />
    <!-- 遍历每项 -->
    <el-table-column
      :prop="item.prop"
      :label="item.label"
      :width="item?.width"
      v-for="(item, index) in columnList"
      :key="index"
      :align="item.align ? item.align : 'center'"
      :show-overflow-tooltip="item.tooltip || false"
    >
      <template #default="scope" v-if="item.slot">
        <slot :name="item.prop" :row="scope.row"></slot>
      </template>
    </el-table-column>

    <!-- ____________________________________ -->

    <!-- 插槽位1 -->
    <el-table-column
      :label="header.state"
      align="center"
      v-if="header.state"
      width="90"
    >
      <template #default="scope">
        <slot name="state" :row="scope.row"></slot>
      </template>
    </el-table-column>

    <el-table-column
      :label="header.operation"
      :width="operationWidth"
      align="center"
      v-if="header.operation"
    >
      <template #default="scope">
        <slot name="btn" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { defineProps,computed,onMounted,defineEmits  } from "vue";
// import useCacheRouterStore from "../store/useCacheRouterStore";
// const Store = useCacheRouterStore();

const prop = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    default: () => [],
  },
  // 表头数据
  columnList: {
    type: Array,
    default: () => [],
  },
  // 多选框选中事件
  handleSelectionChange: {
    type: Function,
  },
  

  height: {
    type: Number,
    default:null,
  },
  header: {
    type: Object,
    default: () => {
      return { serial: false, state: "", operation: "" };
    },
  },

  operationWidth: {
    type: Number,
    default: "",
  },
  // 表头样式
  HeaderStyle: {
    type: Object,
    default: () => {
      return { background: "#262628", color: "#fff" };
    },
  },
  
  fristSlot: {
    type: Boolean,
    default: false,
  },
});
// 表格样式斑马纹



const emit = defineEmits(['onrowclick'])
const onRowClick = (row)=>{
  console.log(row);
  emit('onrowclick',row)
}
onMounted(()=>{
})
const TableColumnStyle = ({ rowIndex }) => {
 
};

</script>
<style  lang="scss">
// 去除表格线条
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  background-color: #92cbf1 !important;
}

/*鼠标移入某行时的背景色*/

:deep(.el-table__border-left-patch){
  width: 0;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
  background: #2f2f30;
  color: var(--Gray-Gray6, #fff);

}

.el-table .el-table__cell{
  background: #222222;
}
.el-table td.el-table__cell{
  border: none;
}

.el-table--fit .el-table__inner-wrapper:before{
  width: 0;
}
.el-table th.el-table__cell.is-leaf{
  border: none;
}
.el-table td.el-table__cell div{
 color: var(--Gray-Gray6, #A6A6A6);
}
.el-table td:hover{
  color: #fff;
}

/* 鼠标移入某一列时改变该列字体颜色 */
.el-table__body .el-table__row:hover .cell {
  color: #fff !important;  /* 加上 !important 来确保样式生效 */
}

</style>
